<template>
  <view class="body">
    <view class="choose_img" @click="addPic('avatar')">
      <view class="user_img" v-if="!form.avatar"></view>
      <image
        mode="aspectFill"
        :src="form.avatar"
        v-else
        style="width: 100rpx; height: 100rpx; border-radius: 50%"
      ></image>
      <view class="text">上传真实的个人头像</view>
      <u-icon
        name="arrow-right"
        color="#888"
        size="28"
        style="margin-left: 210rpx"
      ></u-icon>
    </view>

    <view class="form_item">
      <view class="text">真实姓名</view>
      <view class="inp">
        <u-input
          placeholder="请输入真实姓名"
          v-model="form.real_name"
          :clearable="false"
          :height="100"
          :placeholderStyle="'color:#888'"
          input-align="right"
        ></u-input>
      </view>
    </view>
    <view class="form_item">
      <view class="text">身份证号</view>

      <view class="inp">
        <u-input
          placeholder="请输入身份证号"
          v-model="form.real_code"
          :clearable="false"
          :height="100"
          :placeholderStyle="'color:#888'"
          input-align="right"
        >
        </u-input>
      </view>
    </view>

    <view class="btn" @click="submit">保存资料</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      form: {
        avatar: "",
        store_id: "",
        real_code: "",
        real_name: ""
      }
    };
  },
  onLoad() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const res = await this.$allrequest.distribution.getCourierInfo({}, true);
      if (res.code == 0) {
        let { courier: info } = res.data;
        this.form.avatar = info.avatar;
        this.form.real_code = info.real_code;
        this.form.store_id = info.store_id;
        this.form.real_name = info.real_name;
      }
    },
    addPic(e) {
      this.$utils.uploadImage(1, (res) => {
        this.form[e] = res;
      });
    },
    async submit() {
      const res = await this.$allrequest.distribution.editInfo(this.form, true);
      if (res.code == 0) {
        uni.showToast({
          title: "保存成功",
          icon: "none",
          image: "",
          duration: 2000
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 24rpx;

  .choose_img {
    width: 702rpx;
    height: 148rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 auto;
    padding: 0 24rpx;
    display: flex;
    align-items: center;

    .user_img {
      width: 100rpx;
      height: 100rpx;
      background: #f5f5f5;
      border-radius: 50%;
    }

    .text {
      font-size: 32rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #262626;
      margin-left: 24rpx;
    }
  }

  .form_item {
    width: 702rpx;
    height: 88rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 24rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;

    .text {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(29, 29, 29, 0.94);
    }

    .see {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
    }
  }

  .picker-view-title {
    padding: 20rpx;
    font-size: 28rpx;
    color: #1aa034;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      color: #999;
    }
  }

  .picker-view {
    width: 750rpx;
    height: 500rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .box {
      position: absolute;
      left: 360rpx;
      top: 280rpx;
    }
  }
  .btn {
    width: 678rpx;
    height: 80rpx;
    background: #f0250e;
    border-radius: 120rpx 120rpx 120rpx 120rpx;
    margin: 0 auto;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-top: 80rpx;
  }
}
</style>
